<template>
	<view class="classification-box pf-100 df-col">
		<cu-custom :isBack="true" bgColor="bg-white"><block slot="content">花市分类</block></cu-custom>
		<view class="df" style="flex: 1;overflow: hidden;">
			<view class="cation-left">
				<scroll-view scroll-y="true" class="scroll-Y">
					<view
						v-for="(item, inx) in categoryArr"
						:key="inx"
						class="cation-left-name"
						:class="categoryInx == inx ? 'cation-left-ativer' : ''"
						@click="leftBtn(item, inx)"
					>
						{{ item.name }}
					</view>
				</scroll-view>
			</view>
			<view class="cation-right">
				<scroll-view scroll-y="true" class="scroll-Y" @scrolltolower="rightLower">
					<view class="df" style="flex-wrap: wrap;">
						<view
							v-for="(item, inx) in goodsList"
							:key="inx"
							class="goods-row bg-white shadow df animation-slide-bottom"
							@click="goodsItemBtn(item)"
							:style="{ animationDuration: parseInt(inx / goodsObj.page) * 0.1 + 0.4 + 's' }"
						>
							<view class="goods-img"><image :src="$Utils.img(item.sku_image)" mode=""></image></view>
							<view class="goods-info df-col">
								<view class="goods-title">{{ item.goods_name }}</view>
								<view class="goods-info-bottom">
									<view class="goods-num text-xs text-gray">{{ item.sale_num }}人付款</view>
									<view class="goods-price slightly-red">￥{{ item.price }}</view>
								</view>
							</view>
						</view>
					</view>
					<view class="cu-load over" v-if="totals && goodsObj.page * goodsObj.page_size >= totals && totals > 5"></view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'classification',
	data() {
		return {
			categoryArr: [
				{
					imageUrl: 'https://toc.nanyuecloud.com/toc-inst-app/zqanswer/test/img/xmg/huashi/areas/0.png',
					id: 28,
					name: '陈村'
				},
				{
					imageUrl: 'https://toc.nanyuecloud.com/toc-inst-app/zqanswer/test/img/xmg/huashi/areas/1.png',
					id: 34,
					name: '北滘'
				},
				{
					imageUrl: 'https://toc.nanyuecloud.com/toc-inst-app/zqanswer/test/img/xmg/huashi/areas/2.png',
					id: 43,
					name: '伦教'
				},
				{
					imageUrl: 'https://toc.nanyuecloud.com/toc-inst-app/zqanswer/test/img/xmg/huashi/areas/3.png',
					id: 44,
					name: '勒流'
				},
				{
					imageUrl: 'https://toc.nanyuecloud.com/toc-inst-app/zqanswer/test/img/xmg/huashi/areas/4.png',
					id: 45,
					name: '大良'
				},
				{
					imageUrl: 'https://toc.nanyuecloud.com/toc-inst-app/zqanswer/test/img/xmg/huashi/areas/5.png',
					id: 46,
					name: '容桂'
				}
			],
			categoryInx: 0,
			goodsList: [],
			goodsObj: {
				category_id: 28,
				category_level: 2,
				keyword: '',
				page: 0,
				page_size: 10
			},
			totals: null
		};
	},
	onLoad(e) {
		this.getGoodsList();
	},
	onShow(e) {},
	methods: {
		// 商品点击
		leftBtn(val, inx) {
			this.categoryInx = inx;
			this.goodsList = [];

			(this.goodsObj = {
				page: 0,
				page_size: 10,
				category_id: val.id,
				category_level: 2,
				web_city: 0
			}),
				(this.totals = null);
			this.getGoodsList();
		},
		getGoodsList() {
			uni.showLoading({
				title: '商品加载中...'
			});
			this.goodsObj.page++;
			this.$Apis.getGoodsSku(this.goodsObj).then(res => {
				this.goodsList = this.goodsList.concat(res.list);
				this.totals = res.count;
				uni.hideLoading();
			});
		},
		// 商品滚动到底部
		rightLower(e) {
			if (this.totals && this.goodsObj.page * this.goodsObj.page_size < this.totals) {
				this.getGoodsList();
			}
		},
		goodsItemBtn(val) {
			this.$Router.push({
				path: '/shopPages/goods/detail',
				query: {
					goods_id: val.sku_id,
					type: 1
				}
			});
		}
	},
	mounted() {}
};
</script>

<style lang="scss">
.classification-box {
	.cation-left {
		height: 100%;
		overflow: hidden;
		width: 190rpx;
		.cation-left-name {
			padding: 30rpx 0;
			text-align: center;
			font-size: 28rpx;
			font-family: Adobe Heiti Std;
			font-weight: normal;
			color: #222222;
		}
		.cation-left-ativer {
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #fd3b5c;
		}
	}
	.cation-right {
		flex: 1;
		overflow: hidden;
		height: 100%;
		padding: 0 20rpx;
		.goods-row {
			width: 100%;
			padding: 20rpx;
			margin-bottom: 20rpx;
			border-radius: 20rpx;
		}
		.goods-img {
			width: 150rpx;
			height: 150rpx;
			margin-right: 20rpx;
			image {
				width: 100%;
				height: 100%;
			}
		}
		.goods-info {
			justify-content: space-between;
			width: 300rpx;
			.goods-title {
				width: 100%;
				text-overflow: -o-ellipsis-lastline;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				line-clamp: 2;
				-webkit-box-orient: vertical;
			}
		}
	}
	.scroll-Y {
		height: 100%;
	}
}
</style>
